/*
 * @Author: your name
 * @Date: 2022-04-01 09:46:58
 * @LastEditTime: 2022-04-07 09:13:44
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\customModal\customModal.jsx
 */

import React, { useRef, useState, useEffect } from 'react';
import AddIncomeSearch from './AddIncomeSearch'
import Checkmodal from './secondStep/checkDataModal/checkModal'
import Secondstepmodal from './secondStep/secondStepModal'
import { Table, Button, Input, Row, Form } from 'antd';
import {
    SearchOutlined,
    RightOutlined
} from '@ant-design/icons';
import './addIncome.css'
import { useNavigate } from 'react-router-dom';
const AddIncome = () => {

    //展开高级搜索模块
    const [isOpen, setIsOpen] = useState(false)
    //搜搜
    const formRef = useRef()
    //表格数据
    const data = [
        {
            key: '1',
            client: 'yyqx',
            clientType: '有意向',
            contact: 'zxy',
            tel: 12345678,
            qq: 11,
            inputTime: '2022-04-01 09:19',
            salesman: '超级管理员'
        }
    ];
    const columns = [
        {
            title: '客户名称',
            dataIndex: 'client',
            key: 'client',
            fixed: 'left',
            width: 80,
            render: client => {
                return client
            },
        },
        {
            title: '客户类型',
            dataIndex: 'clientType',
            key: 'clientType',
            width: 150,
        },
        {
            title: '联系人',
            dataIndex: 'contact',
            key: 'contact',
            width: 65,

        },
        {
            title: '手机号码',
            dataIndex: 'tel',
            key: 'tel',
            width: 85,

        },
        {
            title: 'QQ',
            dataIndex: 'qq',
            key: 'qq',
            width: 85,

        },
        {
            title: '录入时间',
            dataIndex: 'inputTime',
            key: 'inputTime',
            width: 95,

        },
        {
            title: '业务员',
            dataIndex: 'salesman',
            key: 'salesman',
            width: 70,

        }
    ];

    //立即搜索
    const onFinish = () => {

    }
    const onSearch = () => {
        console.log(formRef.current);
    }

    //高级搜索
    const powerSearch = () => {
        setIsOpen(!isOpen)
    }

    //表格查看个人数据
    const navigate = useNavigate()
    const [isModal, setIsModal] = useState(false)
    const [recordData, setRecordData] = useState({})
    
    const checkData = (record) => {
        // navigate('/finance/financelist')
        setRecordData(record)
        setIsModal(!isModal)
        console.log(isModal);

    }
    // useEffect(() => {
        
    //     return () => {
            
    //     };
    // }, []);

    const accpetFalse = (f) => {
        setIsModal(f)
    }
    return (
        <>
            <Row justify='center' style={{ height: '50px' }}>
                <Form ref={formRef} layout={'inline'} onFinish={onFinish}>
                    <Form.Item
                        name="searchValue"
                        rules={[{ required: true, message: '请输入数据' }]}
                    >
                        <Input placeholder="客户名称、手机号码、备注" />
                    </Form.Item>
                    <Form.Item name='btn' style={{ margin: '0' }}>
                        <Button type="primary" htmlType="submit" size="midlle" style={{ backgroundColor: '#4FABC1' }} onClick={onSearch}>搜索</Button>
                    </Form.Item>
                </Form>

            </Row>

            {/* 高级搜索From */}
            <Row style={{ display: `${isOpen ? 'block' : 'none'}` }} >
                <AddIncomeSearch />
            </Row>

            <Row justify='center'>
                <Button
                    icon={<SearchOutlined />}
                    type='primary'
                    style={{ backgroundColor: '#CC2626', margin: '10px 0' }}
                    onClick={powerSearch}
                >
                    展开高级搜索
                </Button>
            </Row>

            <Row justify='center'>
                <div id='stepInfo'>
                    1单击选中客户 <RightOutlined /><RightOutlined /> 2录入信息
                </div>

            </Row>

            {/* 无关联客户 */}
            <Row justify='center'>
                <Secondstepmodal />
            </Row>
            {
                isModal ? <Checkmodal recordData={recordData} accpetFalse={accpetFalse} /> : ""
            }

            {/* 表格数据 */}
            <Table
                columns={columns}
                dataSource={data}
                pagination={false}
                onRow={record => {
                    return {
                        onClick: event => { checkData(record) }
                    }
                }}
            />

        </>
    );
}

export default AddIncome;
